<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>产品详情</title>
    <link rel="stylesheet" href="css/Detalhes.css">
</head>

<body class="full">
    <!-- 顶部开始 -->
    <div class="top">
        <div class="containt cf">
            <h4><a href="index.html">乐购www.lego.com</a></h4>
            <p>请
                <span><a href="sign.html">登录</a>  | </span>
                <span><a href="register.html">注册</a></span>
            </p>
            <p>欢迎光临乐购</p>
        </div>
    </div>

    <!-- 导航开始 -->
    <header class="containt cf">
        <div class="logo">
            <img src="" alt="">
        </div>
        <div class="pic">
            <img src="images/Detalhes1.jpg" alt="">
            <img src="images/Detalhes2.jpg" alt="">
        </div>
        <div class="ipt">
            <input type="text" placeholder="请输入搜索的商品名">
            <button type="button" class="btn1">
                <img src="images/search.png" alt="">
            </button>
            <button type="button" class="btn2"><a href="shoppingcard.html"><img src="images/shoppingcard.png">购物车</a>
                </button>
        </div>
    </header>

    <!-- banner部分 -->
    <div class="banner">
    </div>

    <!-- 主要内容 -->
    <main class="containt cf">
        <div class="fl">
            <div class="magnifier" id="magnifier1">
                <div class="magnifier-container">
                    <div class="images-cover">
                        <img src="images/robort1.jpg" alt="">
                    </div>
                    <!--当前图片显示容器-->
                    <div class="move-view"></div>
                    <!--跟随鼠标移动的盒子-->
                </div>
                <div class="magnifier-assembly">
                    <div class="magnifier-btn">
                        <span class="magnifier-btn-left">&lt;</span>
                        <span class="magnifier-btn-right">&gt;</span>
                    </div>
                    <!--按钮组-->
                    <div class="magnifier-line">
                        <ul class="clearfix animation03">
                            <li>
                                <div class="small-img">
                                    <img src="./images/robort2.jpg" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="./images/robort3.jpg" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="./images/robort4.jpg" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="./images/robort5.jpg" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="./images/robort3.jpg" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="./images/robort2.jpg" />
                                </div>
                            </li>
                           
                        </ul>
                    </div>
                    <!--缩略图-->
                </div>
                <div class="magnifier-view"></div>
                <!--经过放大的图片显示容器-->
            </div>
        </div>
        <div class="fr">
            <h2>【新品首发】DJI 大疆RoboMaster S1 机甲大师 S1专业教育机器人</h2>
            <p class="p1">寓教于乐，玩出名堂</p>
            <div class="bg_pic">
                <p class="p2">价格：
                    <del>￥3800.00</del>
                </p>
                <p class="p3">促销价：
                    <span>￥3499.00-4200.00</span>
                </p>
                <p class="p4">本店活动：
                    <span>满99包邮</span>
                </p>
                <a href="#">更多优惠&gt;&gt;</a>
            </div>
            <p class="p5">运费:江苏苏州 至 成都 快递: 0.00</p>
            <ul class="ck cf">
                <li>月销量
                    <span>2871</span>
                </li>
                <li>累积评价
                    <span>10915</span>
                </li>
                <li style="border:0">送积分
                    <span>300</span>起</li>
            </ul>
            <p class="p6">颜色分类：
                <span class="on">机甲大师 S1RoboMaster S1套餐一</span>
                <span>机甲大师 S1RoboMaster S1套餐一</span>
                <span>机甲大师 S1RoboMaster S1套餐一</span>
                <span>机甲大师 S1RoboMaster S1套餐一</span>
                <span>机甲大师 S1RoboMaster S1套餐一</span>
            </p>
            <p class="p7">
                数量：
                <button type="button" id="minus">-</button>
                <input type="text" name="" id="num" value="1">
                <button type="button" id="add">+</button>
            </p>
            <p class="p8">花呗分期：
                <span>¥1166.33*3期 </br>（0手续费）
                </span>
                <span>¥583.16*6期 </br>（0手续费）
                </span>
                <span>¥313.44*12期 </br>（0手续费）
                </span>
            </p>
            <a href="#" style="margin-left: 94px;color: #cf7a00;background-color: #ffeb8a">立 即 购 买</a>
            <a href="#" style="color: white;background-color: #ff8a00">
                <img src="images/null.png">加 入 购 物 车</a>
            <p class="p9">
                <img src="images/star.jpg" alt="">收藏商品</p>
            <p class="p10">举报</p>
            <ul class="service cf" style="position: relative;">
                <li>服务承诺</li>
                <li>正品保证</li>
                <li>急速退款</li>
                <li>赠运费险</li>
                <li>七天无理由退换</li>
                <li style="position: absolute;right:30px;">支付方式 ▼
                    <p>
                        <a href="#">支付宝支付</a>
                    </p>
                    <p>
                        <a href="#">微信支付</a>
                    </p>
                </li>
            </ul>
        </div>
    </main>


    <!-- 评论 -->
    <div class="containt cf">
        <div class="comment">
            <div class="head">
                <p class="p1 active">产品详情</p>
                <p class="p2">累积评价 10915</p>
            </div>


            <div class="xxk">
                <div class="show">
                    <img src="images/comment.jpg" alt="">
                    <p class="p1">
                        <input type="radio" style="margin-left: 0;" name="all">全选
                        <input type="radio" name="all">追加(12)
                        <input type="radio" name="all">图片(93)
                        <select name="" id="">
                            <option value="">按默认</option>
                            <option value="">按评分</option>
                        </select>
                    </p>
                    <div class="cot">
                        <p class="p2">挺不错的，机甲大师对战T-34-85</p>
                        <div>
                            <img src="images/comment1.jpg" alt="">
                            <img src="images/comment1.jpg" alt="">
                        </div>
                        <p class="p3">2019-09-09 13:55:30</p>
                        <span>t***1(匿名)</span>
                        <p class="p4">解释：亲，感谢您在DJI 大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们一直也在不断的努力争取给您最好的购物体验，感谢亲的支持，期待下次亲的光临</p>
                    </div>
                    <div class="cot">
                        <p class="p2">挺不错的，机甲大师对战T-34-85</p>
                        <div>
                            <img src="images/comment1.jpg" alt="">
                            <img src="images/comment1.jpg" alt="">
                        </div>
                        <p class="p3">2019-09-09 13:55:30</p>
                        <span>t***1(匿名)</span>
                        <p class="p4">解释：亲，感谢您在DJI 大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们一直也在不断的努力争取给您最好的购物体验，感谢亲的支持，期待下次亲的光临</p>
                    </div>
                    <div class="cot">
                        <p class="p2">挺不错的，机甲大师对战T-34-85</p>
                        <div>
                            <img src="images/comment1.jpg" alt="">
                            <img src="images/comment1.jpg" alt="">
                        </div>
                        <p class="p3">2019-09-09 13:55:30</p>
                        <span>t***1(匿名)</span>
                        <p class="p4">解释：亲，感谢您在DJI 大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们一直也在不断的努力争取给您最好的购物体验，感谢亲的支持，期待下次亲的光临</p>
                    </div>
                    <div class="cot">
                        <p class="p2">挺不错的，机甲大师对战T-34-85</p>
                        <div>
                            <img src="images/comment1.jpg" alt="">
                            <img src="images/comment1.jpg" alt="">
                        </div>
                        <p class="p3">2019-09-09 13:55:30</p>
                        <span>t***1(匿名)</span>
                        <p class="p4">解释：亲，感谢您在DJI 大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们一直也在不断的努力争取给您最好的购物体验，感谢亲的支持，期待下次亲的光临</p>
                    </div>
                    <div class="cot">
                        <p class="p2">挺不错的，机甲大师对战T-34-85</p>
                        <div>
                            <img src="images/comment1.jpg" alt="">
                            <img src="images/comment1.jpg" alt="">
                        </div>
                        <p class="p3">2019-09-09 13:55:30</p>
                        <span>t***1(匿名)</span>
                        <p class="p4">解释：亲，感谢您在DJI 大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们一直也在不断的努力争取给您最好的购物体验，感谢亲的支持，期待下次亲的光临</p>
                    </div>
                    <div class="cot">
                        <p class="p2">挺不错的，机甲大师对战T-34-85</p>
                        <div>
                            <img src="images/comment1.jpg" alt="">
                            <img src="images/comment1.jpg" alt="">
                        </div>
                        <p class="p3">2019-09-09 13:55:30</p>
                        <span>t***1(匿名)</span>
                        <p class="p4">解释：亲，感谢您在DJI 大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们一直也在不断的努力争取给您最好的购物体验，感谢亲的支持，期待下次亲的光临</p>
                    </div>
                    <div class="cot">
                        <p class="p2">挺不错的，机甲大师对战T-34-85</p>
                        <div>
                            <img src="images/comment1.jpg" alt="">
                            <img src="images/comment1.jpg" alt="">
                        </div>
                        <p class="p3">2019-09-09 13:55:30</p>
                        <span>t***1(匿名)</span>
                        <p class="p4">解释：亲，感谢您在DJI 大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们一直也在不断的努力争取给您最好的购物体验，感谢亲的支持，期待下次亲的光临</p>
                    </div>
                    <div class="cot">
                        <p class="p2">挺不错的，机甲大师对战T-34-85</p>
                        <div>
                            <img src="images/comment1.jpg" alt="">
                            <img src="images/comment1.jpg" alt="">
                        </div>
                        <p class="p3">2019-09-09 13:55:30</p>
                        <span>t***1(匿名)</span>
                        <p class="p4">解释：亲，感谢您在DJI 大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们一直也在不断的努力争取给您最好的购物体验，感谢亲的支持，期待下次亲的光临</p>
                    </div>
                    <div class="page">
                        <a href="#">上一页</a>
                        <a href="#" style="width: 20px;height: 20px;">1</a>
                        <a href="#" style="width: 20px;height: 20px;">2</a>
                        <a href="#" style="width: 20px;height: 20px;">3</a>
                        <a href="#">...</a>
                        <a href="#">下一页</a>
                        <a href="#">末页</a>
                    </div>
                </div>



                <div class="robort">
                    <img src="images/robort7.jpg" alt="">
                </div>

            </div>

            
            
            





            
        </div>

        <div class="like">
            <p>猜你喜欢</p>
            <div>
                <img src="images/robort6.jpg" alt="">
            </div>
            <div>
                <img src="images/robort6.jpg" alt="">
            </div>
            <div>
                <img src="images/robort6.jpg" alt="">
            </div>

            <div>
                <img src="images/robort6.jpg" alt="">
            </div>
            <div>
                <img src="images/robort6.jpg" alt="">
            </div>
            <div>
                <img src="images/robort6.jpg" alt="">
            </div>
            <div>
                <img src="images/robort6.jpg" alt="">
            </div>
            <div>
                <img src="images/robort6.jpg" alt="">
            </div>
            <div>
                <img src="images/robort6.jpg" alt="">
            </div>
        </div>
    </div>


    <!-- 尾部 -->

    <footer class="containt">
        <ul>
            <li>
                <a>
                    <img src="images/p1.jpg" alt="" style="border: white">
                    <div>
                        <h2>正品保障</h2>
                        <p>正品行货 放心选购</p>
                    </div>
                </a>
            </li>
            <li>
                <a>
                    <img src="images/p2.jpg" alt="">
                    <div>
                        <h2>满86包邮</h2>
                        <p>满86元 免运费</p>
                    </div>
                </a>
            </li>
            <li>
                <a>
                    <img src="images/p3.jpg" alt="">
                    <div>
                        <h2>售后无忧</h2>
                        <p>7天无理由退货</p>
                    </div>
                </a>
            </li>
            <li>
                <a>
                    <img src="images/p4.jpg" alt="">
                    <div>
                        <h2>准时送达</h2>
                        <p>收货时间由你做主</p>
                    </div>
                </a>
            </li>
        </ul>
        <div class="mid cf">
            <div>
                <h2>
                    <a href="#">新手入门</a>
                </h2>
                <p>
                    <a href="#">购物流程</a>
                </p>
                <p>
                    <a href="#">会员制度</a>
                </p>
                <p>
                    <a href="#">订单查询</a>
                </p>
                <p>
                    <a href="#">服务协议及隐私说明</a>
                </p>
                <p>
                    <a href="#">网站地图</a>
                </p>
            </div>
            <div>
                <h2>
                    <a href="#">支付方式</a>
                </h2>
                <p>
                    <a href="#">货到付款</a>
                </p>
                <p>
                    <a href="#">网上支付</a>
                </p>
                <p>
                    <a href="#">礼品卡支付</a>
                </p>
                <p>
                    <a href="#">其它支付</a>
                </p>
            </div>
            <div>
                <h2>
                    <a href="#">配送服务</a>
                </h2>
                <p>
                    <a href="#">配送进度查询</a>
                </p>
                <p>
                    <a href="#">商品验货与签收</a>
                </p>
            </div>
            <div>
                <h2>
                    <a href="#">相关规则</a>
                </h2>
                <p>
                    <a href="#">平台规则</a>
                </p>
                <p>
                    <a href="#">退换货政策</a>
                </p>
                <p>
                    <a href="#">发票制度</a>
                </p>
                <p>
                    <a href="#">帮助中心</a>
                </p>
            </div>
            <div>
                <h3>App更优惠</h3>
                <img src="images/code.jpg" alt="">
            </div>
            <div>
                <h3>加微信查订单</h3>
                <img src="images/code2.jpg" alt="">
            </div>
        </div>
    </footer>

    <div class="over">
        <p style="padding-top:30px; ">沪ICP备XXXXXXXXX号 | 经营证照 | 互联网药品信息服务资格证(沪)-经营性-2017-0006 | 违法和不良信息举报电话：XXX-XXXXXXXX | 沪B2-XXXXXXX | </p>
        <p>沪公网安备 XXXXXXXXX号 | 友情链接 | 出版物经营许可证 | 增值电信业务经营许可证</p>
        <p style="padding-bottom:20px ;">
            <img src="images/trademark1.jpg" alt="">
            <img src="images/trademark2.png" alt="">
            <img src="images/trademark3.jpg" alt="">
            <img src="images/trademark4.jpg" alt="">
            <img src="images/trademark5.png" alt="">
            <img src="images/trademark6.jpg" alt="">
        </p>
    </div>

    <script src="js/jquery.min.js"></script>
    <script src="js/common.js"></script>
    <script src="lib/magnifier(1).js"></script>
    <script src="js/Detalhes.js"></script>
</body>

</html>